<template>
	<view>
		<view class="UserList flex">
			<view class="portrait"><image :src="Info.note_member.member_avatar" mode=""></image></view>
			<view class="UserInfo">
				<view class="Name">{{Info.note_member.member_name}}</view>
				<view class="autograph">{{Info.note.add_time |formaDate}}</view>
			</view>
			<!-- <view class="follow" :class="Info.note_member.had_followed?'':'bgeee'" @click="follow()">+关注</view> -->
		</view>
		
		<view class="ImgList">
			<swiper class="swiper_box" :circular="true" @change="swiperIndex" style="height: 720rpx;">
				<swiper-item v-for="(item,index) in Info.note.note_image" :key="index">
					<image style="width: 100%;" :src="item.url" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="back_round_2">{{swiperCurrent+1}}/{{Info.note.note_image.length}} </view>
		</view>
		
		<view style="width: 100%;overflow-x: scroll;overflow-y: hidden; display: -webkit-inline-box;margin:20rpx;box-sizing: border-box;">
				<view class="shopBox flex" v-for="(item,index) in Info.note.note_goods" :key="index">
					<view class="shopImg">
						<image :src="item.goods_image_thumb" mode=""></image>
					</view>
					<view class="InfoBox2">
						<view class="shopName textHide">{{item.goods_name}}</view>
						<view class="Price">￥{{item.goods_price}}</view>
					</view>
				</view>
		</view>
		
		<view class="Main">
			<view class="">
				<view class="Title">{{Info.note.note_title}}</view>
				<view class="content">{{Info.note.note_content}}</view>
			</view>
			
			<!-- <view class="label">
				<text>冬季</text>
				<text>时尚穿搭</text>
			</view> -->
			
			<view class="flex operationBox">
				<view class=""></view>
				<view class="operation flex">
					<!-- <view class="">
						<image src="../../static/images/shareIco.png" mode=""></image>
					</view> -->
					<view class="">
						<image v-if="Info.note.had_zan" src="../static/images/FabulousIco.png" mode="" @click="Fabulous(Info.note.note_id,Info.note.had_zan)"></image>
						<image v-else src="../static/images/dzIco.png" mode=""  @click="Fabulous(Info.note.note_id,Info.note.had_zan)"></image>
						<text>{{Info.note.zan_count}}</text>
					</view>
					<view class="" @click="comment()">
						<image src="../static/images/commentIco.png" mode=""></image>
						<text>{{Info.note.comment_count}}</text>
					</view>
				</view>
			</view>
			
			<view class="comment">
				<view v-for="(item2,index2) in commentList" :key="index2" class="texthide">{{item2.member_name}}：{{item2.comment_message}}</view>
				<!-- <view class="Allcomment">查看全部评论</view> -->
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		
		<uni-popup ref="historyMsg2" type="bottom">
			<view style="padding:0 10upx;padding-top: 20upx;" class="historyMsg">		
				<view style="padding:0 10upx;display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 20upx;" class="">
					<view class="">
						<text style="font-size: 30upx;font-weight: 600;">全部评论{{commentList.length}}</text>
					</view>
					<view @click="closeHistory()" class="">
						<text style="font-size: 30upx;font-weight: 600;">关闭</text>
					</view>
				</view>
				<scroll-view style="height: 700upx;" scroll-y="true"  class="">
					<view v-for="(item99,index99) in commentList" :key="index99"  style="display: flex;flex-direction: row;padding-left: 10upx;padding-right: 10upx;margin-top: 20upx;" class="">						 
						<view style="width: 80upx;height: 80upx;border-radius: 40upx;" class="">
							<image style="width: 80upx;height: 80upx;border-radius: 40upx;" :src="item99.member_avatar" mode=""></image>
						</view>
						<view class="">
							<view style="display: flex;flex-direction: row;padding-left: 20upx;justify-content: space-between;width: 620upx;" class="">
								<view class="">								
									<text >{{item99.member_name}}</text>
								</view>
								<view class="">								
									<text >{{item99.comment_time |formaDate}}</text>
								</view>
							</view>
							<view style="padding-left: 20upx;" class="">
								<text >{{item99.comment_message}}</text>
							</view>
						</view>						
					</view>
				</scroll-view>
				
				<view class="flex" style="height: 80rpx;">
					<input maxlength="20" class="commentInput" v-model="mesage" type="text" placeholder="发表评论" /><text style="margin-right: 30rpx;" @click="sendOut()">发送</text>
				</view>
				
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				swiperCurrent:0,
				note_id:"",
				Info:"",
				commentList:"",
				mesage:""
			}
		},
		onLoad(e) {
			if(e.note_id){
				this.note_id=e.note_id
			}
			this.getInfo()
		},
	
		methods: {
			sendOut(){//发表评论
				this.$util.request({
					url: '/hao/index.php?act=api-note_comment&op=save',
					method: 'post',
					data: {
						note_id:this.note_id,
						message:this.mesage
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.mesage=""
						this.getcomment()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			comment(){//评论
				this.$refs.historyMsg2.open();
			},
			closeHistory(){
				this.$refs.historyMsg2.close();
			},
			Fabulous(note_id,type){//点赞取消
				// alert(note_id,index,type)
					let cancel=""
					if(type){
						cancel=1
					}else{
						cancel=0
					}
					this.$util.request({
						url: "/hao/index.php?act=api-note&op=zan",
						method: 'get',
						data: {
							'note_id':note_id,
							'cancel':cancel
						}
					}).then(response => {
						if (response.error_code == 0) {
							this.Info.note.had_zan = !this.Info.note.had_zan
							if(this.Info.note.had_zan){
								this.Info.note.zan_count++
								uni.showToast({
									title: "点赞成功",
									icon: 'none'
								})
							}else{
								this.Info.note.zan_count--
							}
						
						} else {
							uni.showToast({
								title: response.message,
								icon: 'none'
							})
						}
					})
			},
			getInfo(){//获取信息
				this.$util.request({
					url: '/hao/index.php?act=api-note&op=detail',
					method: 'get',
					data: {
						note_id:this.note_id
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.Info=res.datas
						this.getcomment()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			swiperIndex(e) {
				this.swiperCurrent = e.detail.current
			},
			getcomment(){
				this.$util.request({
					url: '/hao/index.php?act=api-note_comment&op=list',
					method: 'get',
					data: {
						note_id:this.note_id
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.commentList=res.datas.note_comments
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			}
		}
	}
</script>

<style>
	.commentInput{
		border: 1rpx solid #AAAAAA;
		width: 550rpx;
		border-radius: 30rpx;
		padding: 0 30rpx;
	}
	.Allcomment{
		color: #333333;
		
	}
	.texthide{
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
		white-space: nowrap;
	}
	.comment{
		border-radius: 20rpx;
		background-color: #F4F4F4;
		padding: 20rpx;
	}
	.operation{
		width: 350rpx;
	}
	.operation image{
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.operationBox{
		margin-top: 20rpx;
	}
	.label{
		margin: 20rpx 0;
	}
	.label text{
		background-color: rgba(255,37,73,0.1);
		color: #FF2549;
		padding:0 20rpx;
		border-radius: 25rpx;
		line-height: 38rpx;
		margin-right: 20rpx;
	}
	.Main .content{
		font-size: 26rpx;
		color: #333333;
		/* height: 150rpx; */
		line-height: 38rpx;
		/* overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical; */
	}
	.Main .Title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.Main{
		margin: 0 20rpx;
	}
	.ImgList{
		position: relative;
	}
	.back_round_2 {
		height: 71rpx;
		width: 71rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		line-height: 71rpx;
		position: absolute;
		top: 580rpx;
		right: 20rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.UserList .UserInfo .Name{
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}
	.UserList .UserInfo .Name image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	.UserList .UserInfo .autograph{
		font-size: 24rpx;
		color: #666666;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.UserList .follow{
		line-height: 50rpx;
		background-color:#E82B57;
		color: #FFFFFF;
		width: 100rpx;
		text-align: center;
		border-radius: 30rpx;
	}
	.bgeee{
		background-color: #EEEEEE;
	}
	.UserList .UserInfo{
		width: 580rpx;
	}
	.UserList .portrait image{
		width: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		border-radius: 50%;
	}
	.UserList .portrait{
		height: 100rpx;
	}
	.UserList{
		padding: 20rpx;
		border-top: 1rpx solid #EEEEEE;
	}
	.shopBox .shopName{
		line-height: 40rpx;
	}
	.shopBox .Price{
		line-height: 40rpx;
		color: #FE3B6B;
	}
	.shopImg{
		width: 100rpx;
		margin-right: 10rpx;
	}
	.shopImg image{
		width: 100rpx;
		height: 100rpx;
	}
	.textHide{
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 400rpx;
		overflow: hidden;
	}
	.shopBox{
		width: 500rpx;
		height: 100rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
		display: inline-block;
	}
	page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.historyMsg{
		background-color: #fff;
		overflow: scroll;		
	}
	.bptx{
		position: fixed;
		z-index:9999999999;
		top:300upx;
		height: 80upx;
		line-height: 80upx;
		left: 30upx;
		transition:all 2s;
	}
	
	.bptxA{		
		transition:all 2s;
	}
	.bptxtxt{		 
		padding-left: 30upx;
		padding-right: 30upx;
		color: #fff;
		border-radius: 40upx;
		font-size: 30upx;
	}
	.node{		
		background-color: transparent;
		font-size: 26upx;
		width: 480upx;
		transform: translateY(-20upx);
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 20upx;
		padding-right: 20upx;
		
	}
	
	.watchList{
		position: relative;
		z-index:99;
		background-color: #fff;
		height: 500upx;
		overflow: scroll;
		padding-left: 10upx;
		padding-top: 20upx;
		padding-right: 10upx;
	}
	.watchListTitle{
		height: 80upx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index:99;
		background-color: #fff;
		width: 750upx; 
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 100upx;
		padding-right: 100upx;
	}
</style>
